<template>
	<view class="wrap">
		<img class="bgs" src="../../../static/aidex/login/9.png" />
		<img class="bot" src="../../../static/aidex/login/13.png" />
		<view class="bgBlur">
			<img class="tops" src="../../../static/aidex/login/10.png" />
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item class="names" required :label-position="labelPosition" label="您的姓名" prop="name">
					<view class="inp">
						<u-input name="name" v-model="model.name" placeholder-style="color:#C99F76" type="text"
							placeholder="请输入用户名"></u-input>
					</view>
				</u-form-item>

				<u-form-item required :label-position="labelPosition" label="请选择性别" prop="sex">
					<u-radio-group v-model="model.sex" @change="radioGroupChange" :width="radioCheckWidth"
						:wrap="radioCheckWrap">
						<u-radio active-color="#FFB83D" shape="circle" v-for="(item, index) in radioList" :key="index"
							:name="item.name">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</u-form-item>

				<u-form-item required :label-position="labelPosition" label="手机号码" prop="phone">
					<view class="inp">
						<u-input name="phone" v-model="model.phone" placeholder-style="color:#C99F76" type="text"
							placeholder="请输入手机号"></u-input>
					</view>
				</u-form-item>

				<u-form-item required :label-position="labelPosition" label="身份证号" prop="idcard">

					<view class="inp">
						<u-input name="idcard" v-model="model.idcard" placeholder-style="color:#C99F76" type="text"
							placeholder="请输入身份证号"></u-input>
					</view>

				</u-form-item>


				<u-form-item required :label-position="labelPosition" label="请填写地址" prop="region">

					<view style="flex: 1; ">
						<view class="inp" style="margin-bottom:30rpx;">
							<u-input placeholder-style="color:#C99F76" :border="border" type="select"
								:select-open="pickerShow" v-model="model.region" placeholder="请选择地区"
								@click="pickerShow = true"></u-input>
						</view>
						<view class="inp">
							<u-input name="name" v-model="model.addr" placeholder-style="color:#C99F76" type="text"
								placeholder="请填写详细地址"></u-input>
						</view>
					</view>

				</u-form-item>
				<u-form-item required :label-position="labelPosition" label="婚姻情况" prop="hunyin">
					<u-radio-group v-model="model.hunyin" :width="radioCheckWidth" :wrap="radioCheckWrap">
						<u-radio active-color="#FFB83D" shape="circle" v-for="(item, index) in hunyinList" :key="index"
							:name="item.name">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</u-form-item>


				<u-form-item class="names" required :label-position="labelPosition" label="请填写微信号" prop="wx">
					<view class="inp">
						<u-input name="wx" v-model="model.wx" placeholder-style="color:#C99F76" type="text"
							placeholder="请输入微信号"></u-input>
					</view>
				</u-form-item>
				<u-form-item required :label-position="labelPosition" label="在香港是否有不良记录(犯罪记录)" prop="fz">
					<u-radio-group v-model="model.fzjl" :width="radioCheckWidth" :wrap="radioCheckWrap">
						<u-radio active-color="#FFB83D" shape="circle" v-for="(item, index) in fzjlList" :key="index"
							:name="item.name">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</u-form-item>

				<u-form-item required :label-position="labelPosition" label="请选择学历" prop="xl">
					<u-radio-group v-model="model.xl" :width="radioCheckWidth" :wrap="radioCheckWrap">
						<u-radio active-color="#FFB83D" shape="circle" v-for="(item, index) in xlList" :key="index"
							:name="item.name">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</u-form-item>

				<u-form-item required :label-position="labelPosition" label="名下有无车辆" prop="che">
					<u-radio-group v-model="model.che" :width="radioCheckWidth" :wrap="radioCheckWrap">
						<u-radio active-color="#FFB83D" shape="circle" v-for="(item, index) in cheList" :key="index"
							:name="item.name">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item required :label-position="labelPosition" label="名下有无房产" prop="fc">
					<u-radio-group v-model="model.fc" :width="radioCheckWidth" :wrap="radioCheckWrap">
						<u-radio active-color="#FFB83D" shape="circle" v-for="(item, index) in fcList" :key="index"
							:name="item.name">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item required :label-position="labelPosition" label="想要申请的信用卡额度" prop="daikuan">
					<u-radio-group v-model="model.daikuan" :width="radioCheckWidth" :wrap="radioCheckWrap">
						<u-radio active-color="#FFB83D" shape="circle" v-for="(item, index) in daikuanList" :key="index"
							:name="item.name">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<!-- 本人签名 *
				点击签名
				签名将被记录为图片，可能被复制
				身份征正反面照片各一张 *
				添加图片
				图片要求:最多6张 -->
				<u-form-item required :label-position="labelPosition" label="身份证(正/反)面照片各一张" prop="photo">
					<view>
						<view @click="uploadimg(1)" class="cardCss">

							<img v-if="zheng" :src="zheng" alt="">
							<span v-else>+ 添加正面图片</span>
						</view>
						<view @click="uploadimg(2)" class="cardCss">
							<img v-if="fan" :src="fan" alt="">
							<span v-else>+ 添加反面图片</span>

						</view>
					</view>
				</u-form-item>
				<u-form-item required :label-position="labelPosition" label="本人签名" prop="sign">

					<view class="sign" @click="sign">
						<img v-if="imgs" :src="imgs" />
						<span v-else>点击签名</span>
					</view>
				</u-form-item>

			</u-form>

			<!-- <u-button >提交</u-button> -->
			<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>

		</view>
		<image class="sub" @click="submit" src="../../../static/aidex/login/btn.png" mode=""></image>

		<u-modal @confirm="confirm" :title-style="titleS" title="申请成功" :show-cancel-button="false" confirm-color="#585EA1" confirm-text="领取审核结果"
			v-model="show" content="将在30分钟内出审核结果"></u-modal>

	</view>
</template>

<script>
	export default {

		data() {
			let that = this;
			return {
				titleS:{'font-family': 'PingFang SC, PingFang SC',
				'font-weight': 500,
				'font-size':'34rpx',
				color: '#000000',
				'line-height': '53rpx'},
				show: false,
				fan: "",
				zheng: '',
				action: "",
				imgs: "",
				model: {
					name: '',
					sex: '',
					photo: '',
					idcard: '',
					region: '',
					addr: "",
					hunyin: '',
					wx: "",
					fzjl: '',
					xl: "",
					che: "",
					fc: "",
					daikuan: '',
					sign: '',

					likeFruit: '',
					intro: '',
					payType: '支付宝',
					agreement: false,

					goodsType: '',
					phone: '',
					code: '',
					password: '',
					rePassword: '',
					remember: false,

				},
				selectList: [{
						value: '电子产品',
						label: '电子产品'
					},
					{
						value: '服装',
						label: '服装'
					},
					{
						value: '工艺品',
						label: '工艺品'
					}
				],
				rules: {

					photo: [{
						required: true,
						message: '请上传身份证正反面',
						trigger: ['change', 'blur'],
					}],
					name: [{
							required: true,
							message: '请输入姓名',
							trigger: 'blur',
						},

						{
							// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.chinese(value);
							},
							message: '姓名必须为中文',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],

					sign: [{
						required: true,
						message: '请本人签名',
						trigger: ['change', 'blur'],
					}],



					che: [{
						required: true,
						message: '请选择名下有无车辆',
						trigger: 'change'
					}, ],

					fc: [{
						required: true,
						message: '请选择名下有无房产',
						trigger: 'change'
					}, ],

					daikuan: [{
						required: true,
						message: '请选择想要申请的信用卡额度',
						trigger: 'change'
					}, ],

					hunyin: [{
						required: true,
						message: '请选择婚姻情况',
						trigger: 'change'
					}, ],

					hunyin: [{
						required: true,
						message: '请选择婚姻情况',
						trigger: 'change'
					}, ],
					sex: [{
						required: true,
						message: '请选择性别',
						trigger: 'change'
					}, ],
					xl: [{
						required: true,
						message: '请选择学历',
						trigger: 'change'
					}, ],
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],
					idcard: [{
							required: true,
							message: '请输入身份证号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.idCard(value);
							},
							message: '身份证号不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],
					region: [{
						required: true,
						message: '请选择地区',
						trigger: 'change',
					}],

					wx: [{
						required: true,
						message: '请输入微信号',
						trigger: ['change', 'blur'],
					}],
					intro: [{
							required: true,
							message: '请填写简介'
						},
						{
							min: 5,
							message: '简介不能少于5个字',
							trigger: 'change',
						},
						// 正则校验示例，此处用正则校验是否中文，此处仅为示例，因为uView有this.$u.test.chinese可以判断是否中文
						{
							pattern: /^[\u4e00-\u9fa5]+$/gi,
							message: '简介只能为中文',
							trigger: 'change',
						},
					],
					likeFruit: [{
						required: true,
						message: '请选择您喜欢的水果',
						trigger: 'change',
						type: 'array',
					}],
					payType: [{
						required: true,
						message: '请选择任意一种支付方式',
						trigger: 'change',
					}],

					goodsType: [{
						required: true,
						message: '请选择商品类型',
						trigger: 'change',
					}],

					code: [{
							required: true,
							message: '请输入验证码',
							trigger: ['change', 'blur'],
						},
						{
							type: 'number',
							message: '验证码只能为数字',
							trigger: ['change', 'blur'],
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: ['change', 'blur'],
						},
						{
							// 正则不能含有两边的引号
							pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
							message: '需同时含有字母和数字，长度在6-12之间',
							trigger: ['change', 'blur'],
						}
					],
					rePassword: [{
							required: true,
							message: '请重新输入密码',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return value === this.model.password;
							},
							message: '两次输入的密码不相等',
							trigger: ['change', 'blur'],
						}
					],
				},
				border: false,
				check: false,
				selectStatus: 'close',
				checkboxList: [{
						name: '荔枝',
						checked: false,
						disabled: false
					},
					{
						name: '香蕉',
						checked: false,
						disabled: false
					},
					{
						name: '橙子',
						checked: false,
						disabled: false
					},
					{
						name: '草莓',
						checked: false,
						disabled: false
					}
				],
				radioList: [{
						name: '男',
						checked: true,
						disabled: false
					},
					{
						name: '女',
						checked: false,
						disabled: false
					}
				],
				hunyinList: [{
						name: '已婚',
						checked: true,
						disabled: false
					},
					{
						name: '未婚',
						checked: false,
						disabled: false
					}
				],
				fzjlList: [{
						name: '无',
						checked: true,
						disabled: false
					},
					{
						name: '有',
						checked: false,
						disabled: false
					}
				],
				cheList: [{
						name: '无车辆',
						checked: true,
						disabled: false
					},
					{
						name: '有车辆',
						checked: false,
						disabled: false
					}
				],
				fcList: [{
						name: '无房产',
						checked: true,
						disabled: false
					},
					{
						name: '有房产',
						checked: false,
						disabled: false
					}
				],
				daikuanList: [{
						name: '5万到12万',
						checked: true,
						disabled: false
					},
					{
						name: '12万到20万',
						checked: false,
						disabled: false
					}
				],

				xlList: [{
						name: '小学',
						checked: true,
						disabled: false
					},
					{
						name: '初中',
						checked: false,
						disabled: false
					}, {
						name: '高中',
						checked: false,
						disabled: false
					}, {
						name: '大专',
						checked: false,
						disabled: false
					}, {
						name: '本科',
						checked: false,
						disabled: false
					}, {
						name: '硕士',
						checked: false,
						disabled: false
					}, {
						name: '博士及以上',
						checked: false,
						disabled: false
					}, {
						name: '其他',
						checked: false,
						disabled: false
					},
				],

				// 请选择学历

				radio: '',
				actionSheetList: [{
						text: '男'
					},
					{
						text: '女'
					},
					{
						text: '保密'
					}
				],
				actionSheetShow: false,
				pickerShow: false,
				selectShow: false,
				radioCheckWidth: 'auto',
				radioCheckWrap: true,
				labelPosition: 'top',
				codeTips: '',
				errorType: ['message'],
			};
		},
		onLoad() {

		},
		computed: {
			borderCurrent() {
				return this.border ? 0 : 1;
			}
		},
		onShow() {
			//selectedOrg为注册的方法名称，org为传回来的参数，回调函数调用this.setSelectedOrg()
			uni.$on('selectedOrg', (org) => {
				console.log(org, 666666666)
				this.imgs = org.imgs
				this.model.sign = org.imgs
			})
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			confirm(){
				this.show = false;
				uni.navigateTo({
					url:"/pages/sys/home/cus"
				})
			},
			uploadimg(type) {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.model.photo = tempFilePaths[0]

						if (type == 1) {
							this.zheng = tempFilePaths[0]
						} else {
							this.fan = tempFilePaths[0]
						}

						console.log(tempFilePaths, 222);

					}
				});

			},
			onChange(lists) {
				this.imageUrl = lists;
			},

			sign() {

				// this.imgs = ''
				uni.navigateTo({
					url: "/pages/sys/home/sign"
				})

			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
this.show = true
					} else {
						console.log('验证失败');
					}
				});
			},

			// checkbox选择发生变化
			checkboxGroupChange(e) {
				this.model.likeFruit = e;
			},
			// radio选择发生变化
			radioGroupChange(e) {
				this.model.payType = e;
			},
			// 勾选版权协议

			// 选择地区回调
			regionConfirm(e) {
				this.model.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},



		}
	};
</script>


<style>
	page {
		background: #171712;
	}
</style>
<style scoped lang="scss">
	.sub {
		margin: 121rpx auto 123rpx;
		display: block;
		width: 534rpx;
		height: 75rpx;
	}

	.sign {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFD452;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 610rpx;
		height: 189rpx;
		background: #3e3222;
		border-radius: 11rpx 11rpx 11rpx 11rpx;
		border: 2rpx solid #4f4734;

		img {
			// width: 100%;
			height: 189rpx;
			display: block;
			background: #fff;

		}

		// border-image: linear-gradient(180deg, rgba(255, 224, 165, 1), rgba(255, 246, 200, 1)) 2 2;
	}

	.cardCss {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFD452;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 610rpx;
		height: 342rpx;
		background: #3e3222;
		border-radius: 11rpx 11rpx 11rpx 11rpx;
		border: 2rpx solid #4f4734;
		// border-image: linear-gradient(180deg, rgba(255, 224, 165, 1), rgba(255, 246, 200, 1)) 2 2;
		margin-bottom: 10rpx;

		img {
			width: 100%;
			height: 100%;
		}
	}

	/deep/ .uni-input-placeholder {}

	/deep/ .u-radio__icon-wrap {
		border: 2rpx solid #FFB83D;
	}

	/deep/ .u-radio__label {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFF7E2;
		line-height: 47rpx;
	}

	/deep/ .uni-input-input {
		background: none;
		color: #fff;
	}

	/deep/ .u-radio {
		margin-bottom: 20rpx;
	}

	input:-webkit-autofill,
	textarea:-webkit-autofill,
	select:-webkit-autofill {
		-webkit-text-fill-color: #000 !important;
		/* 自动填充的文字颜色 */
		-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
		/* 背景颜色 */
		background-color: transparent !important;
		background-image: none !important;
		transition: background-color 50000s ease-in-out 0s !important;
		/* 防止背景色改变 */
	}

	/* 在页面的style中添加 */
	.u-input-auto-complete {
		background-color: transparent;
		/* 或者设置为你想要的颜色 */
	}

	.wrap {

		width: 100%;
		max-width: 750px;
		margin: 0 auto;
		padding: 30rpx;
		margin-bottom: 60rpx;
		position: relative;

		.bot {
			display: block;
			position: absolute;
			bottom: 0;
			width: 593rpx;
			height: 255rpx;
			right: 0;
		}

		.bgs {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			z-index: 1;

			width: 100%;
			display: block;

		}

		.bgBlur {
			position: relative;
			z-index: 2;

			padding: 62rpx 40rpx;
			// position: absolute;
			// left: 30rpx;

			// right: 30rpx;
			// top: 335rpx;
			// z-index: 2;
			margin: 260rpx auto 0;
			background: url('../../../static/aidex/login/bg.png') no-repeat;
			background-size: 100% 100%;

			.tops {
				position: absolute;
				width: 385rpx;
				height: 65rpx;
				top: -32rpx;
				left: 50%;
				margin-left: -193rpx;
			}
		}
	}

	/deep/ .u-form-item {
		padding-top: 0 !important;
		margin-bottom: 50rpx;
	}

	/deep/ .u-form-item {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFF7E2;
		line-height: 50rpx;
	}

	// .names
	/deep/ .u-form-item--left__content--required {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: rgba(255, 103, 38, 1);
		line-height: 50rpx;
		// margin-right: 5px;
		// right: 10px;
		// left: 70px; 
	}

	/deep/ .u-border-bottom:after {
		border-bottom-width: 0;
	}

	.inp {
		width: 100%;
		padding: 0 20rpx;
		background: linear-gradient(180deg, rgba(255, 188, 127, 0.42) 0%, rgba(255, 215, 154, 0.42) 100%);
		border-radius: 11rpx 11rpx 11rpx 11rpx;
		border: 2rpx solid rgba(255, 224, 165, 0);
	}

	// /deep/ .u-form-item--right__content[data-v-006449ec]{
	// 	// filter: blur(4px);

	// }
</style>
